<template>
	<view class="con">
    <!-- 搜索 -->
    <view class="search flex flex_between">
    	<view class="searchz flex">
    		<input class="searchz_ipt" type="text" placeholder="请输入要搜索的" v-model="titleSearch" />
    		<image class="searchz_img" mode="widthFix" src="/static/search.png" @click="searchHandle"></image>
    	</view>
    </view>
		<!-- tab -->
		<view class="tab flex">
			<view class="tabli" :class="selectCodeId===item.id?'active':''" v-for="(item,index) in tabList" :key="index"	@click="changTab(item.id)">
				<view class="tablic_1">{{item.title}}</view>
				<view class="tablic_2"></view>
			</view>
		</view>
    <!-- 列表 -->
    <view class="tuijian">
      <view class="tuijianli flex flex_between" v-for="(item,index) in courseList"  @click="goProductDetail(item)">
        <!-- 左边 -->
        <view class="tuijianliz">
          <view class="remenList_lic flex">
            <view class="remenList_lic1">{{item.title}}</view>
            <image class="remenList_lic12" mode="widthFix" v-if="item.huo!=='0'" src="/static/index/img39.jpg"></image>
          </view>
          <view class="remenList_linav">{{item.desc}}</view>
        </view>
        <!-- 右边 -->
        <image class="tuijian_right" mode="widthFix" :src="item.pic"></image>
      </view>
    </view>
	</view>
</template>

<script>
  import {
    getcodeCode,//获取分类
    getcodeList//分类下课程列表
  } from '@/request/api.js'
	export default {
		data() {
			return {
        titleSearch:'',//搜索关键字
				selectCodeId: 0,//选择的分类导航Id
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15,//每页数量
				tabList: [
          {
            title:'全部',
            id:0
          },
          {
            title:'网创',
            id:1
          },
          {
            title:'海外',
            id:2
          },
          {
            title:'工具',
            id:3
          },
          {
            title:'训练营',
            id:4
          },
        ], //分类导航
        courseList:[] ,//课程列表
        remenList: [{
            title: '涨粉计划',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '闲鱼宝藏',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '搭子部落',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '京东带货',
            con: '50%起佣金，保姆级陪跑'
          }
        ],
			}
		},
		onLoad(options) {
      console.log('进入课程分类页--获取options')
      const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
      console.log(options)
      console.log(options.pid)
      console.log(q)
      if(options.tabId){
        this.selectCodeId = options.tabId
      }
      if (options.pid) {
      	// 通过分享页面进的
      	console.log('通过分享页面进的')
      	uni.setStorageSync('pid', options.pid)
      
      } else if (q) {
      	// 通过扫描二维码进的
      	console.log('通过扫描二维码进的')
      	var match = q.match(/\?(.+)/);
      	if (match && match.length > 1) {
      		var queryString = match[1].split("=")[1]; // 获取到的查询字符串
      		console.log('pid是多少'); // 输出: data=12345
      		console.log(queryString); // 输出: data=12345
      		uni.setStorageSync('pid', queryString)
      	} else {
      		console.log('No query string found.');
      	}
      }
		},
    onShow() {
      this.getcodeCodeFun() // 获取分类
      this.isLogin = uni.getStorageSync('isLogin') || 1
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
    },
    onHide() {
      // 处理当页面隐藏时的逻辑
      console.log('页面隐藏');
      let that = this
      setTimeout(function(){
        that.selectCodeId=0
      },1000)
    },
    onReachBottom() {
     let totolPage =Math.ceil(this.total / this.pagesizes)
     console.log('总共多少页')
     console.log(totolPage)
	 console.log(this.page)
     if(this.page<=totolPage){
       this.loadMore(); // 当上拉时加载更多数据
     }
    },
		methods: {
      // 获取分类导航
      getcodeCodeFun(){
        getcodeCode().then(res=>{
          console.log('获取分类')
          console.log(res)
          if (res.error_code === 0) {
            this.tabList = res.data
            this.page = 1
            this.courseList = []
            this.getcodeListFun();
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getcodeListFun()
      },
      // 分类下课程列表
      getcodeListFun(){
        // this.courseList = []
        let param = {
          code:this.selectCodeId,
          page:this.page,
          title:this.titleSearch
        }
        getcodeList(param).then(res=>{
          console.log('分类下课程列表')
          console.log(res)
          if (res.error_code === 0) {
            this.total = Number(res.data.total);
           this.pagesizes = Number(res.data.pagesizes);
           let listRe = res.data.arrList
           if(listRe.length>0){
             this.courseList = this.courseList.concat(listRe);
           }
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 进入-产品详情页
      goProductDetail(item) {
        console.log(item)
        if(item.id===0||item.id==='0'){
          return
        }
      	uni.navigateTo({
      		url: '/pages/shiZhanDe/index?id=' + item.id +'&title=' + item.title
      	})
      },
			changTab(id) {
        this.page = 1
        this.courseList = []
				this.selectCodeId = id
        this.getcodeListFun()
			},
      // 点击搜索
      searchHandle(){
        this.page = 1
        this.courseList = []
        this.getcodeListFun()
      }
		},
    // 分享微信好友
    onShareAppMessage(event) {
      console.log(event);
      return {
        title: '陌上未来，全程保姆式陪跑',
        path: '/pages/classification/index?pid=' + uni.getStorageSync('userInfo').id,
        // imageUrl: imageUrl
      }
    },
    //分享到朋友圈
    onShareTimeline(event) {
      console.log(event);
      return {
        title: '陌上未来，全程保姆式陪跑',
        path: '/pages/classification/index?pid=' + uni.getStorageSync('userInfo').id,
        query: 'pid=' + uni.getStorageSync('userInfo').id,
        // imageUrl: imageUrl
      }
    }
	}
</script>

<style scoped lang="scss">
	.con {
    padding: 30rpx;
		.tab {
			padding: 30rpx;
      padding-top:0;
			width: 100%;
			box-sizing: border-box;
      padding-bottom: 50rpx;
			.tabli {
				margin-right: 40rpx;
				color: rgba(155,155,155,1);
				font-size: 36rpx;
				text-align: center;
			}
			.tablic_1{
	height: 44rpx;
}

			.tabli.active .tablic_1 {
				color:#000;
        font-weight: bold;
				position: relative;
				top: 4rpx;
			}

			.tabli.active .tablic_2 {
				width: 50rpx;
				height: 6rpx;
				background-color: rgba(249, 191, 65, 1);
				margin: 0 auto;
				position: relative;
				top: 14rpx;
			}
		}

	

		.rem {
			// padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;
		}

		.remcz_4_1 {
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			margin-left: -4rpx;

			text {
				font-family: 'AvantGardeFont';
				font-size: 34rpx;
			}
		}
	}
  .search{
  	margin-bottom: 50rpx;
  	width: 100%;
  	height: auto;
  	.searchz{
  		width: 100%;
  		height: 80rpx;
  		line-height: 40rpx;
  		border-radius: 100rpx;
  		background-color: rgba(255,255,255,1);
  		color: rgba(136,136,136,1);
  		font-size: 28rpx;
  		padding: 0 20rpx;
  		box-sizing: border-box;
  		.searchz_ipt{
  			width: 90%;
        margin-left: 2%;
  		}
  		.searchz_img{
  			width: 48rpx;
  			height: auto;
  		}
  	}
  	.searchy{
  		width: 260rpx;
  		height: 80rpx;
  		border-radius: 100rpx;
  		background-color: rgba(249,191,65,1);
  		text-align: center;
  		justify-content: center;
  		color: rgba(0,0,0,1);
  		font-size: 28rpx;
  		.searchy_img{
  			width: 40rpx;
  			height: auto;
  			margin-right: 8rpx;
  		}
  	}
    .searchy.huise{
      background-color: rgba(229,229,229,1);
    }
  }
  .tuijian{
    width: 100%;
    height: auto;
    .tuijianli{
      width: 100%;
      height: auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      background: #fff;
      .tuijianliz{
        width: 80%;
        .remenList_lic{
          width: 100%;
          height: auto;
          margin-bottom: 8rpx;
          .remenList_lic1{
            width: auto;
            max-width: 300rpx;
            overflow: hidden;
            margin-right: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
          }
          .remenList_lic12{
            width: 50rpx;
            height: auto;
            flex-shrink: 0;
            border-radius: 40rpx;
            position: relative;
            top: -10rpx;
          }
          
        }
        .remenList_linav {
          width: 100%;
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(137, 137, 137, 1);
          font-size: 24rpx;
        }
      }
      .tuijian_right{
        width: 80rpx;
        height: auto;
        border-radius: 10rpx;
      }
    }
  }
</style>